<template>
  <el-card>
    <!-- 主页面 -->
    <el-row type="flex" justify="end" class="title">
      <el-button type="primary" @click="addFn">新建用户</el-button>
    </el-row>
    <el-table
      stripe
      :data="tableData"
      border
      style="width: 100%"
    >
      <el-table-column
        prop="username"
        label="用户名"
      />
      <el-table-column
        prop="email"
        label="邮箱"
      />
      <el-table-column v-slot="{row}" label="操作" align="right" header-align="center">
        <el-button size="small" type="primary">设置角色</el-button>
        <el-button size="small" type="primary" @click="editFn(row.id)">编辑</el-button>
        <el-button size="small" type="danger">删除</el-button>
      </el-table-column>
    </el-table>
    <!-- 新增/编辑弹窗 -->
    <el-dialog title="新建用户" :visible.sync="showDialog" @close="closeFn">
      <el-form ref="form" :model="formData" label-width="100px" :rules="rules">
        <el-form-item label="用户名" prop="username">
          <el-input v-model="formData.username" />
        </el-form-item>
        <el-form-item label="电子邮箱" prop="email">
          <el-input v-model="formData.email" />
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="formData.password" />
        </el-form-item>
        <el-row type="flex" justify="end">
          <el-button size="small" type="primary" @click="closeFn">取消</el-button>
          <el-button size="small" type="primary" @click="addUser">创建</el-button>
        </el-row>
      </el-form>
    </el-dialog>
  </el-card>
</template>

<script>
import { getuserList, addUsers, getoneUser } from '@/api/employee'
export default {
  data() {
    return {
      showDialog: false,
      tableData: [],
      formitem: {
        _limit: 20,
        _start: 0
      },
      formData: {
        username: '',
        email: '',
        password: ''
      },
      rules: {
        username: [
          { required: true, message: '用户名不能为空', trigger: 'blur' },
          { min: '4', max: '15', message: '用户名长度应为4-15字符长度', trigger: 'blur' }
        ],
        email: [
          { required: true, message: '邮箱不能为空', trigger: 'blur' },
          { min: '8', max: '20', message: '请输入正确的邮箱格式', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '密码不能为空', trigger: 'blur' },
          { min: '6', max: '15', message: '密码长度应为4-15字符长度', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.initData()
  },
  methods: {
    async initData() {
      const res = await getuserList(this.formitem)
      this.tableData = res.data
      console.log(46, res)
    },
    // 新增弹框
    async addFn() {
      this.showDialog = true
    //   const res = addUsers()
    //   console.log(res)
    },
    async  addUser() {
      await this.$refs.form.validate()
      await addUsers(this.formData)
      this.closeFn()
      this.initData()
    },
    // 关闭弹窗
    closeFn() {
      this.showDialog = false
      this.formData = {
        username: '',
        email: '',
        password: ''
      }
      this.$refs.form.resetFields()
    },
    // 编辑用户
    async editFn(id) {
      this.showDialog = true
      const msg = await getoneUser(id)
      this.formData = msg.data
    }
  }
}
</script>

<style lang="scss" scoped>
.title{
  margin-bottom: 15px;
}
</style>
